<template>
  <div>
    <el-dialog
      :title="this.$t('ExpressOrderManagementLang.BillDetails')"
      :visible.sync="Visible"
      width="1200px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div class="dialogBox">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Package_information')}}</div>
          <MyTable
            :tableColumn="tableColumn_packages"
            :tableData="tableData_packages"
            :isOrder="false"
          >
            <template v-slot:content="scope">
              <span>{{ scope.row[scope.config.prop] }}</span>
            </template>
          </MyTable>
          <div class="summarize">
            <div>{{$t('ExpressOrderManagementLang.freight_zong')}}：{{data.total_freight_price}}</div>
            <div>{{$t('ExpressOrderManagementLang.discount1')}}：{{data.discount}}%</div>
            <div>{{$t('ExpressOrderManagementLang.discount_Freight')}}：{{data.discount_total_freight_price}}</div>
          </div>
        </div>
        <div class="dialogBox">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Cost_information')}}</div>
          <MyTable
            :tableColumn="tableColumn_cost"
            :tableData="tableData_cost"
            :isOrder="false"
          >
            <template v-slot:content="scope">
              <span>{{ scope.row[scope.config.prop] }}</span>
            </template>
          </MyTable>
          <div class="summarize">
            <div>{{$t('ExpressOrderManagementLang.service_charge')}}：{{data.total_survey_price}}</div>
          </div>
        </div>
        <div class="dialogBox">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Insurance_Information')}}</div>
          <div class="dialogBoxItem">
            <div style="width:32%" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.Insured_price')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.insure_price"
                >
                </el-input>
              </div>
            </div>
            <div style="width:32%" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.Guarantee_rate')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.premium_rate"
                >
                </el-input>
              </div>
            </div>
            <div style="width:32%" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.insurance_premium')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.insure_cost"
                >
                </el-input>
              </div>
            </div>
          </div>
        </div>
        <div class="dialogBox">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.total')}}</div>
          <div class="summarize">
            <div>{{$t('ExpressOrderManagementLang.bill_price')}}：{{data.discount_total_price}}</div>
          </div>
        </div>
        <div class="dialogBox">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.bill_remakes')}}</div>
          <div class="dialogBoxItem">
            <div style="width:100%" class="dialogBoxItemRow">
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.remark"
                >
                </el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="position: absolute;left: -100000px;top: 0;" id="pdfDom" class="midContant clearfix">
        <div class="dialogBox">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Package_information')}}</div>
          <MyTable
            :tableColumn="tableColumn_packages"
            :tableData="tableData_packages"
            :isOrder="false"
          >
            <template v-slot:content="scope">
              <span>{{ scope.row[scope.config.prop] }}</span>
            </template>
          </MyTable>
          <div class="summarize">
            <div>{{$t('ExpressOrderManagementLang.freight_zong')}}：{{data.total_freight_price}}</div>
            <div>{{$t('ExpressOrderManagementLang.discount1')}}：{{data.discount}}%</div>
            <div>{{$t('ExpressOrderManagementLang.discount_Freight')}}：{{data.discount_total_freight_price}}</div>
          </div>
        </div>
        <div class="dialogBox">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Cost_information')}}</div>
          <MyTable
            :tableColumn="tableColumn_cost"
            :tableData="tableData_cost"
            :isOrder="false"
          >
            <template v-slot:content="scope">
              <span>{{ scope.row[scope.config.prop] }}</span>
            </template>
          </MyTable>
          <div class="summarize">
            <div>{{$t('ExpressOrderManagementLang.service_charge')}}：{{data.total_survey_price}}</div>
          </div>
        </div>
        <div class="dialogBox">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Insurance_Information')}}</div>
          <div class="dialogBoxItem">
            <div style="width:32%" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.Insured_price')}}:
              </div>
              <div class="contant">
                <div class="contant_text">{{data.insure_price}}</div>
              </div>
            </div>
            <div style="width:32%" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.Guarantee_rate')}}:
              </div>
              <div class="contant">
                <div class="contant_text">{{data.premium_rate}}</div>
              </div>
            </div>
            <div style="width:32%" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.insurance_premium')}}:
              </div>
              <div class="contant">
                <div class="contant_text">{{data.insure_cost}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="dialogBox">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.total')}}</div>
          <div class="summarize">
            <div>{{$t('ExpressOrderManagementLang.bill_price')}}：{{data.discount_total_price}}</div>
          </div>
        </div>
        <div class="dialogBox">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.bill_remakes')}}</div>
          <div class="dialogBoxItem">
            <div style="width:100%" class="dialogBoxItemRow">
              <div class="contant">
                <div class="contant_text">{{data.remark}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button  @click="getImg($t('ExpressOrderManagementLang.Bill_information'))" size="small">{{$t('ExpressOrderManagementLang.export_bill')}}</el-button>
        <el-button  @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // 接收绑定参数
    midHight: [Number,String],
  },
  data() {
    return {
      Visible: false,
      id:'',
      data:{},
      tableColumn_packages: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Package_number'),
          prop: "package_sn",
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Express_Number'),
          prop: "express_sn",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Weight_measurement'),
          prop: "cal_weight",
          width: 80,
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.weight'),
          prop: "gross_weight",
          width: 80,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.long'),
          prop: "length",
          width: 80,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.wide'),
          prop: "width",
          width: 80,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.high'),
          prop: "height",
          width: 80,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.volume'),
          prop: "volume",
          width: 80,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.freight'),
          prop: "freight_cost",
          width: 80,
        },
      ],
      tableData_packages: [],
      tableColumn_cost: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Cost_Name'),
          prop: "name",
          width: 200,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Cost_charging_method'),
          prop: "chargeMethod_name",
          width: 130,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Cost_unit_price'),
          prop: "unitPrice",
          width: 130,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Cost_price'),
          prop: "whole_price",
          width: 130,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.cost'),
          prop: "cost",
          width: 120,
        },
      ],
      tableData_cost: [],
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
    
  },
  mounted() {
  },
  deactivated(){
    
  },
  watch: {
  },
  methods: {
   
    init(data) {
      this.id=data.id
      this.Visible = true;
      this.getData();
    },
    //获取单条
    getData() {
      this.$get("billInfo", {id: this.id }).then((res) => {
        this.data = res.data;
        this.tableData_packages=res.data.packages
        this.tableData_cost=res.data.services
      });
    },
    //取消修改
    cancel() {
      this.data={}
      this.tableData_packages=[]
      this.tableData_cost=[]
      this.Visible = false;
      let dom = document.getElementsByClassName("el-input__inner");
      for (let i = 0; i < dom.length; i++) {
         dom[i].style.border = "1px solid #E0E3E9";
      }
    },
  },
};
</script>

<style scoped lang="less" >
  .midContant {
    border: 0;
    width: 100%;
  }
  .dialogBox {
    padding: 10px 15px;
    .dialogBoxItem .dialogBoxItemRow {
      width: 24%;
    }
  }
  .summarize{
    margin-top: 10px;
    font-size: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 20px;
  }
  .tableBox{
    height: 78px;
    /deep/.vxe-table--body-wrapper{
      height: 40px !important;
      min-height: 40px !important;
    }
  }
  #pdfDom {  //导出账单样式
    .tableBox{
      height: 100%;
      /deep/.vxe-table--body-wrapper{
        height: auto !important;
        min-height: 40px !important;
      }
    }
    .contant_text{
      width: 100%;
      height: 32px;
      line-height: 32px;
      border-radius: 7px;
      border: 1px solid #E0E3E9;
      background-color: #F5F7FA;
      padding: 0 2px;
    }
  }
</style>